<template>
  <div class="purchase-management-page">
    <!-- 搜索筛选栏 -->
    <div class="search-filter-bar">
      <el-form :model="filterForm" class="filter-form">
        <el-row :gutter="20">
          <!-- 每列占6格实现4列布局 -->
          <el-col :span="6">
            <el-form-item label="进货单号">
              <el-input
                v-model="filterForm.purchaseNo"
                placeholder="请输入进货单号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据状态">
              <el-select
                v-model="filterForm.status"
                placeholder="请选择单据状态"
              >
                <el-option label="草稿" value="draft"></el-option>
                <el-option label="待审核" value="pending"></el-option>
                <el-option label="已审核" value="approved"></el-option>
                <el-option label="已入库" value="inStock"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-input
                v-model="filterForm.customerName"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="制单日期">
              <el-date-picker
                v-model="filterForm.createDate"
                type="date"
                placeholder="请选择制单日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-button-group">
        <el-button type="primary" @click="searchPurchases">搜索</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </div>
    </div>

    <!-- 操作按钮栏 -->
    <div class="action-button-bar">
      <el-button type="primary">新增</el-button>
      <el-button>删除</el-button>
      <el-button>显示</el-button>
      <el-button>审核</el-button>
      <el-button>采购</el-button>
      <el-button>关闭</el-button>
      <el-button>导入</el-button>
      <el-button>导出</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="purchaseList" border class="purchase-table">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" width="50" type="index"></el-table-column>
      <el-table-column label="进货单号" prop="purchaseNo"></el-table-column>
      <el-table-column label="单据状态" prop="status"></el-table-column>
      <el-table-column label="进货日期" prop="purchaseDate"></el-table-column>
      <el-table-column label="销售单号" prop="saleNo"></el-table-column>
      <el-table-column label="客户名称" prop="customerName"></el-table-column>
      <el-table-column label="联系人" prop="contact"></el-table-column>
      <el-table-column label="联系方式" prop="contactWay"></el-table-column>
      <el-table-column label="销售部门" prop="saleDepartment"></el-table-column>
      <el-table-column
        label="销售负责人"
        prop="saleResponsible"
      ></el-table-column>
      <el-table-column
        label="进货数量"
        prop="purchaseQuantity"
      ></el-table-column>
      <el-table-column label="进货金额" prop="purchaseAmount"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="small" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-model:current-page="pageInfo.currentPage"
      v-model:page-size="pageInfo.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup lang="ts">
import { ElMessageBox, ElTable, ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";

// 筛选表单数据
const filterForm = reactive({
  purchaseNo: "",
  status: "",
  customerName: "",
  createDate: "",
});

// 数据列表
const purchaseList = ref<any[]>([]);

// 分页信息
const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
});
const handleEdit = (row: any) => {
  ElMessage.success(`修改成功！`);
};
const handleDelete = (row: any) => {
  ElMessage.success(`删除成功！`);
};
// 模拟获取进货数据
const getPurchaseList = async () => {
  // 这里应替换为实际的接口请求，例如使用axios
  // 模拟返回数据
  const mockData = {
    list: [
      {
        purchaseNo: "JH0001",
        status: "draft",
        purchaseDate: "2024 - 02 - 20",
        saleNo: "XS0001",
        customerName: "客户一",
        contact: "联系人一",
        contactWay: "13800000000",
        saleDepartment: "销售部门一",
        saleResponsible: "李健",
        purchaseQuantity: 50,
        purchaseAmount: 4000.0,
      },
      {
        purchaseNo: "JH0008",
        status: "draft",
        purchaseDate: "2024 - 02 - 20",
        saleNo: "XS0001",
        customerName: "客户二",
        contact: "联系人一",
        contactWay: "13800000000",
        saleDepartment: "销售部门三",
        saleResponsible: "李佳",
        purchaseQuantity: 50,
        purchaseAmount: 2070.0,
      },
      {
        purchaseNo: "JH0004",
        status: "draft",
        purchaseDate: "2025 - 04 - 16",
        saleNo: "XS0002",
        customerName: "客户一",
        contact: "联系人一",
        contactWay: "15214272711",
        saleDepartment: "销售部门二",
        saleResponsible: "王聪",
        purchaseQuantity: 50,
        purchaseAmount: 2800.0,
      },
      {
        purchaseNo: "JH0009",
        status: "draft",
        purchaseDate: "2025 - 04 - 16",
        saleNo: "XS0004",
        customerName: "客户三",
        contact: "联系人二",
        contactWay: "14741000237",
        saleDepartment: "销售部门一",
        saleResponsible: "李健",
        purchaseQuantity: 50,
        purchaseAmount: 2900.0,
      },
      // 更多模拟数据...
    ],
    totalCount: 100,
  };
  purchaseList.value = mockData.list;
  pageInfo.totalCount = mockData.totalCount;
};

// 搜索进货数据
const searchPurchases = () => {
  // 这里添加实际搜索逻辑，例如传递筛选参数到接口
  getPurchaseList();
};

// 重置筛选表单
const resetFilter = () => {
  filterForm.purchaseNo = "";
  filterForm.status = "";
  filterForm.customerName = "";
  filterForm.createDate = "";
};

// 处理每页数量变化
const handleSizeChange = (newSize: number) => {
  pageInfo.pageSize = newSize;
  pageInfo.currentPage = 1;
  searchPurchases();
};

// 处理当前页变化
const handleCurrentChange = (newPage: number) => {
  pageInfo.currentPage = newPage;
  searchPurchases();
};

onMounted(() => {
  getPurchaseList();
});
</script>
<style scoped>
.purchase-management-page {
  padding: 20px;
}

.search-filter-bar {
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}

.filter-form .el-form-item {
  margin-bottom: 0;
}

.form-button-group {
  text-align: right;
  margin-top: 12px;
}

.action-button-bar {
  margin: 12px 0;
  display: flex;
  gap: 12px;
}

.purchase-table {
  width: 100%;
  margin-top: 20px;
}

.el-pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
